.input {
  background: var(--mantine-color-bgColor-6);
  border: 1px solid var(--mantine-color-borderColor-0);
  border-radius: 6px;
  color: var(--mantine-color-fontColorStrong-1);
  font-size: 12px;
  min-width: 80px;
  height: 30px;
  min-height: 30px;
  font-family: Inter-Medium;

  &:focus-within {
    border: 1px solid var(--mantine-color-borderColor-5);
  }

  &[data-checked] {
    background: none;
    background: var(--mantine-color-bgColor-9);
  }
}

.label {
  margin-bottom: 5px;
}

.yearsListControl {
  color: var(--mantine-color-fontColorStrong-1);
}

.monthsListControl {
  color: var(--mantine-color-fontColorStrong-1);
}

.monthCell {
  border: none;

  button {
    width: 35px !important;
    height: 35px !important;
    color: var(--mantine-color-fontColorStrong-1);
    font-size: 14px;
    margin-bottom: 6px;
  }
}
// 日期
.calendarHeaderLevel {
  color: var(--mantine-color-fontColorStrong-1);
  font-size: 14px;
}

.calendarHeaderControl {
  border-radius: 6px;

  &:focus {
    background: transparent;
  }
}

table {
  td {
    border: none;
  }
}
/* stylelint-disable selector-class-pattern */
.levelsGroup {
  width: 100%;
  max-width: 100%;

  & > div {
    width: 100%;
  }

  :global {
    .mantine-DatePickerInput-yearsListControl:active,
    .mantine-DatePickerInput-calendarHeaderControl:active,
    .mantine-DatePickerInput-calendarHeaderLevel:active,
    .mantine-DatePickerInput-day:active,
    .mantine-DatePickerInput-monthsListControl:active {
      background: var(--mantine-color-bgColor-2);
    }

    .mantine-DatePickerInput-calendarHeader {
      width: 100%;
      max-width: 100%;
    }

    .mantine-DatePickerInput-yearsList {
      width: 100%;
    }

    .mantine-DatePickerInput-monthsList,
    .mantine-DatePickerInput-month {
      width: 100%;
    }

    .mantine-DatePickerInput-yearsListCell,
    .mantine-DatePickerInput-monthsListCell {
      text-align: center;
      flex: 1;
    }

    .mantine-DatePickerInput-yearsListRow,
    .mantine-DatePickerInput-monthsListRow {
      display: flex;
    }

    .mantine-DatePickerInput-yearsListControl,
    .mantine-DatePickerInput-monthsListControl {
      width: 100%;
    }
    // 星期
    .mantine-DatePickerInput-weekday {
      color: var(--mantine-color-fontColorWeak-3);
    }
    // 首尾两日期
    .mantine-DatePickerInput-day:where([data-first-in-range]),
    .mantine-DatePickerInput-day:where([data-last-in-range]) {
      border-radius: 6px;
    }
    // 日期范围之内
    .mantine-DatePickerInput-day:where([data-in-range]) {
      width: 100% !important;
      background: var(--mantine-color-bgColor-2);
      border-radius: 0;
    }
    // 日期范围之外
    .mantine-DatePickerInput-day:where([data-outside]) {
      color: var(--mantine-color-fontColorWeak-2);
    }
    // 禁用状态
    .mantine-DatePickerInput-day:where(:disabled, [data-disabled]) {
      color: rgba(255, 255, 255, 10%);
    }

    .mantine-DatePickerInput-yearsListControl:hover,
    .mantine-DatePickerInput-calendarHeaderControl:hover,
    .mantine-DatePickerInput-monthsListControl:hover,
    .mantine-DatePickerInput-calendarHeaderLevel:hover,
    .mantine-DatePickerInput-day:hover {
      background: var(--mantine-color-bgColor-2);
    }

    .mantine-DatePickerInput-day:where([data-selected]) {
      background: var(--mantine-color-btnBgColor-0) !important;
    }

    .mantine-DatePickerInput-monthCell {
      text-align: center;
      padding: 0;
    }

    .mantine-DatePickerInput-day:where([data-first-in-range]) {
      border-top-left-radius: 6px;
      border-bottom-left-radius: 6px;
    }

    .mantine-DatePickerInput-day:where([data-last-in-range]) {
      border-top-right-radius: 6px;
      border-bottom-right-radius: 6px;
    }
  }
}
